<template>
  <div id="category">
    <category-nav-bar class="navbar" />
    <category-slide-bar :slideBarList="slideBarList" @slideBarItemClick="slideBarItemClick" />
    <scroll class="content" ref="categoryscroll">
      <category-sub :subcategoryList="subcategoryList"/>
    </scroll>
  </div>
</template>
<script>
import { getCategory, getSubcategory } from '@/network/category'
import CategoryNavBar from './childsComponent/CategoryNavBar.vue'
import CategorySlideBar from './childsComponent/CategorySlideBar.vue'
import CategorySub from './childsComponent/CategorySub.vue'
import Scroll from '@/components/common/scroll/Scroll.vue'
export default {
  name: "Category",
  components: {
    CategoryNavBar,
    CategorySlideBar,
    CategorySub,
    Scroll
  },
  methods: {
    slideBarItemClick({ maitKey, index }) {
      // 防止反复请求
      if (this.currentIndex === index) return;
      this.currentIndex = index;
      this.getSubcategory(maitKey)
    },
    getSubcategory(Key) {
      getSubcategory(Key).then(res => {
        // console.log(res);
        this.subcategoryList = [...res.data.data.list];
        console.log(this.subcategoryList);
      })
    }
  },
  data() {
    return {
      slideBarList: [], //侧边栏类别数据
      currentIndex: 0,
      subcategoryList: []
    }
  },
  created() {
    // 获取侧边栏的分类数据
    getCategory().then(res => {
      // console.log(res);
      this.slideBarList = res.data.data.category.list
      this.$nextTick(() => {
        this.getSubcategory(this.slideBarList[0].maitKey)
      })
    })
  },
  activated() {
    this.$refs.categoryscroll.refresh()
  }
}
</script>
<style scoped>
.navbar {
  font-weight: 600;
  color: #fff;
  background-color: #ff8198;
}

.content {
  position: fixed;
  top: 44px;
  right: 0;
  bottom: 52px;
  left: 100px;
  overflow: hidden;
}
</style>